<template>
  <div>
    <div v-for="item in Arr">
      <div :style="{ marginLeft: (index - 1) * 10 + 'px'}">
        <!--        	<span @click="onoff(item.id)" v-if="item.children">-->
        <!--          		{{ closeList.includes(item.id) ? "➧" : "⏷" }}-->
        <!--        	</span>-->
        <!--        	{{ item.text }}-->

        <span v-if="item.children"> {{ item.label }}</span>
        <div v-if="item.advanced==false||(item.advanced==true&&isAdvanced)">
          <el-form-item :label="item.label" v-if="!item.children&&item.type=='inputString'" style="max-width:500px">
            <el-input v-model="item.value"/>
          </el-form-item>
          <el-form-item :label="item.label" v-if="!item.children&&item.type=='select'" style="max-width:500px">
            <el-select v-model="item.value" placeholder="please select your zone">
              <!--              <el-option label="1" value="1"/>-->
              <!--              <el-option label="2" value="2"/>-->
              <el-option v-for="item1 in item.valueList" :label="item1.label" :value="item1.value"/>
            </el-select>
          </el-form-item>
          <!--        <el-form :inline="true">-->
          <el-form-item :label="item.label" v-if="!item.children&&item.type=='checkBox'">
            <el-checkbox-group v-model="item.values" style="display:inline" label="name">
              <!--              <el-checkbox v-model="item.value" label="Online activities"  />-->
              <!--              <el-checkbox v-model="item.value" label="Promotion activities"  />-->
              <!--              <el-checkbox v-model="item.value" label="Offline activities" />-->
              <el-checkbox v-for="item1 in item.valueList" :label="item1.value"> {{ item1.label }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item :label="item.label" v-if="!item.children&&item.type=='inputNumber'" style="max-width:500px">
            <el-input-number v-model="item.value" class="mx-4"/>
          </el-form-item>
          <el-form-item :label="item.label" v-if="!item.children&&item.type=='inputStringArray'"
                        style="max-width:500px">
            <span v-for="(item1, index) in item.value">
               <el-input v-model="item.value[index]"
                         class="w-30 m-0"
                         placeholder="Pick a date"
               />

            </span>


          </el-form-item>
          <el-form-item :label="item.label" v-if="!item.children&&item.type=='inputNumberArray'"
                        style="max-width:500px">
            <span v-for="(item1, index) in item.value">
               <el-input-number v-model="item.value[index]"
                                class="w-50 m-2"
                                placeholder="Pick a date"
               />
            </span>


          </el-form-item>
          <el-form-item :label="item.label" v-if="!item.children&&item.type=='selectGroupArray'" style="max-width:500px">
            <el-select v-model="item.value" multiple placeholder="please select your zone" style="width:100%">
              <el-option v-for="item1 in item.valueList" :label="item1.label" :value="item1.label"/>
            </el-select>

          </el-form-item>
          <el-form-item :label="item.label" v-if="!item.children&&item.type=='selectGroup'" style="max-width:500px">
            <el-select v-model="item.value"  placeholder="please select your zone" style="width:100%">
              <el-option v-for="item1 in item.valueList" :label="item1.label" :value="item1.label"/>
            </el-select>

          </el-form-item>
          <div v-if="!item.children&&(item.type=='selectGroupArray'||item.type=='selectGroup')" :style="{  padding: 10 + 'px', marginLeft:  0 + 'px',border: '0px solid var(--el-border-color) '}">
              <div  v-for="item1 in item.valueList">
                <p v-if="item.value.includes(item1.label)">
                  <span>{{item1.label}}</span><span v-if="item.type=='selectGroupArray'">  -NO. {{item.value.indexOf(item1.label)+1}}</span>
                    <tree-list style="margin-left: 10px"
                      :Arr="item1.children"
                       :isAdvanced="isAdvanced"
                  />
                 </p>
              </div>

            </div>
        </div>
      </div>

      <tree-list
          v-if="item.children && !closeList.includes(item.id)"
          :Arr="item.children"
          :index="index"
          :key="item.id"
          :isAdvanced="isAdvanced"
      />
    </div>
  </div>
</template>
<script>
import {reactive, toRefs, ref} from "vue";

export default {
  name: "tree-list",
  props: {
    Arr: {type: Array},
    index: {type: Number},
    isAdvanced: {type: Boolean}
  },
  setup(props) {
    let index = props.index ? props.index : 0;
    index += 1;
    console.log(props.isAdvanced)
    const closeList = reactive([]);

    function onoff(id) {
      if (closeList.includes(id)) {
        closeList.splice(closeList.indexOf(id));
      } else {
        closeList.push(id);
      }
    }

    return {...toRefs(props), closeList, onoff, index};
  },
};
</script>
